<template>
  <div>
    <div class="banner">
      <el-carousel :interval="5000" arrow="always">
        <el-carousel-item v-for="item in banner_list" :key="item">
          <img :src="item" alt="" style="width: 100%;">
          <!--          <img src="https://www.mindskip.net:7001/student/static/img/1.ec94fe23.png" alt="">-->
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="task-list">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <div class="tag"></div>
          <h1 style="font-size: 25px; color: rgb(103, 194, 120); margin-left: 30px;">考试中心</h1>
        </div>
        <h4 v-if="exams.length <= 0" style="text-align: center">当前暂无考试任务</h4>
        <div v-for="(exam, index) in exams" :key="index" class="text item" v-else>
          <h3>
            <span>{{ (exam.task_name).slice(0, 18) }}...</span>
            <span
                style="margin-left: 100px; font-size: 15px; font-weight: normal; color: mediumseagreen">
              开始时间: {{ exam.begin_time }}</span>
            <span
                style="margin-left: 100px; font-size: 15px; font-weight: normal; color: black">
              考试类型: {{ exam.type_name }}
            </span>
            <span style="margin-left: 100px; font-size: 15px; font-weight: normal; color: darkblue"
                  v-if="exam.task_type===0">结束时间: {{ exam.deadline }}</span>
            <el-button style="float: right; padding: 3px 0" type="text" v-if="exam.status===1" @click="goTest(exam.id)">
              <el-tag type="success" size="small" effect="dark">开始考试</el-tag>
            </el-button>
            <el-button style="float: right; padding: 3px 0" type="text" v-if="exam.status===0" disabled>
              <el-tag type="info" size="small" effect="dark">{{ exam.show_status }}</el-tag>
            </el-button>
          </h3>
          <el-divider></el-divider>
        </div>
      </el-card>
    </div>
    <div class="task-list">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <div class="tag1"></div>
          <h1 style="font-size: 25px; color: rgb(103, 194, 120); margin-left: 30px;">答卷中心</h1>
        </div>
        <h4 v-if="papers.length <= 0" style="text-align: center">当前暂无答卷</h4>
        <div class="text item" v-else>
          <el-row :gutter="8">
            <el-col :span="6" v-for="paper in papers" :key="paper.id" class="paper-block">
              <el-card shadow="hover" class="paper-card">
                <div>
                  <h3 style="color: mediumseagreen">{{ (paper.task_name).slice(0, 11) }}...&nbsp;&nbsp;&nbsp;&nbsp;<i
                      class="el-icon-document-checked"></i></h3>
                  <el-divider></el-divider>
                  <p style="margin-bottom: 10px;">
                    <el-tag>系统评分:{{ paper.sys_score }}</el-tag>
                  </p>
                  <p style="margin-bottom: 10px;">
                    <el-tag type="danger">教师评分:{{ paper.hand_score }}</el-tag>
                  </p>
                  <p style="margin-bottom: 10px;">
                    <el-tag type="success">最终成绩:{{ paper.final_score }}</el-tag>
                  </p>
                  <p style="float: right;">
                    <el-button type="success" size="mini" @click="showPaper(paper.id)" v-if="paper.status===3">查看答卷
                    </el-button>
                    <el-button type="success" size="mini" @click="showPaper(paper.id)" v-else disabled>查看答卷</el-button>
                  </p>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>

export default {
  name: "StudentIndex",
  data() {
    return {
      exams: [],
      papers: [],
      banner_list: [],
    }
  },
  created() {
    this.getTaskList()
    this.getAnswerPapers()
    this.loadBanner()
  },
  methods: {
    loadBanner() {
      for (let i = 0; i < 4; i++) {
        let banner = this.$settings.BANNER_URL + `/media/banner/banner${i}.jpg`
        this.banner_list.push(banner)
      }
    },
    showPaper(id) {
      this.$router.push(`/StudentCheckPaper/?id=${id}`)
    },
    goTest(id) {
      this.$router.push(`/StudentExam/?id=${id}`)
    },
    getTaskList() {
      this.$http({
        url: this.$settings.BASE_URL + '/paper/student_index/exams/',
        method: 'get',
        params: {
          id: this.$cookies.get('userinfo').user_id
        }
      }).then(res => {
        if (res.data.code === 20000) {
          this.exams = res.data.result
        } else {
          this.$message({
            type: 'error',
            message: '获取信息出错'
          })
        }
      })
    },
    getAnswerPapers() {
      this.$http({
        url: this.$settings.BASE_URL + '/paper/student_index/answer_papers/',
        method: 'get',
        params: {
          id: this.$cookies.get('userinfo').user_id
        }
      }).then(res => {
        if (res.data.code === 20000) {
          this.papers = res.data.result
        } else {
          this.$message({
            type: 'error',
            message: '获取信息异常',
            duration: 3000,
          })
        }
      })
    },
  },
}
</script>

<style scoped>
.tag1 {
  background-color: #303133;
  width: 10px;
  height: 40px;
  float: left
}

.tag {
  background-color: purple;
  width: 10px;
  height: 40px;
  float: left
}

.paper-card {
  height: 280px;
  width: 280px;
}

.paper-block {
  margin-top: 40px;
}

.task-list {
  margin-top: 40px;
  margin-bottom: 60px;
}

.banner {
  width: 100%;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 90%;
  margin-left: 80px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>
